
<template>
  <!-- 抽屉组件：默认隐藏，点击按钮后显示 -->
  <el-drawer
      :title="'粉丝列表（共 ' + allFenCount + ' 条）'"
      :model-value="drawerVisible"
      :width="500"
      @close="handleClose"
  >
    <!-- 粉丝表格：展示ID和时间 -->
    <el-table :data="fenSiList" stripe style="width: 100%">
      <el-table-column prop="fanId" label="粉丝ID" width="180" />
      <el-table-column label="粉丝昵称" width="180">
        <template #default="scope">
          {{ scope.row.nickname || '加载中...' }}
        </template>
      </el-table-column>
      <el-table-column prop="time" label="关注时间" width="180" />
      <!-- 可根据实际字段补充其他列（如粉丝昵称等） -->
    </el-table>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, defineExpose } from 'vue'
import axios from 'axios'
const allFenCount = ref(0)
// 控制抽屉显示/隐藏
const drawerVisible = ref(false)
// 粉丝列表数据
const fenSiList = ref<any[]>([])


const getUserNameByFanId = async (fanId: string) => {
  // 直接调用用户接口（假设接口为/api/user/{id}，返回数据含nc字段）
  const { data } = await axios.get(`/api/user/${fanId}`)
  return data.nc || '未知用户' // 昵称字段为nc，不存在则显示默认值
}


// 加载粉丝数据（传递 Relations 对象）
const loadFenSiData = async (relations: any) => {
    const { data } = await axios.get('/api/relation', {
      params: relations // 直接传递对象，axios 会自动拆分为 key=value 形式
    })
    fenSiList.value = data
    allFenCount.value=data.length
  for (const item of fenSiList.value) {
      // 直接查询并赋值给当前粉丝项的nickname字段
      item.nickname = await getUserNameByFanId(item.fanId)
  }
}


// 调用时传递完整对象（例如从父组件接收 userId 后构建）
const handleDetailData = async (userId: string) => {
  drawerVisible.value = true
  // 构建 Relations 对象（按需传递属性）
  const relations = {
    userId: userId, // 父组件传递的用户 ID
    fenId: '',      // 可选：其他属性（如粉丝 ID 筛选）
    time: ''        // 可选：时间筛选
  }
  await loadFenSiData(relations)
}

// 关闭抽屉
const handleClose = () => {
  drawerVisible.value = false
}

// 暴露方法给父组件调用
defineExpose({
  handleDetailData
})
</script>

<style scoped>
/* 可自定义表格或抽屉样式 */
::v-deep .el-drawer__body {
  padding: 20px;
}
</style>